@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    @apply bg-gradient-to-br from-blue-500 via-blue-600 to-purple-700 min-h-screen;
  }
}

@layer components {
  .glass-panel {
    @apply bg-white/10 backdrop-blur-md border border-white/20 rounded-xl shadow-2xl;
  }
  
  .glass-card {
    @apply bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg shadow-lg;
  }
  
  .tech-button {
    @apply bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 
           text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 
           shadow-lg hover:shadow-xl transform hover:scale-105 border border-blue-300/30;
  }
  
  .tech-button-secondary {
    @apply bg-white/10 hover:bg-white/20 text-white font-semibold py-2 px-4 
           rounded-lg transition-all duration-200 border border-white/20 
           hover:border-white/30 backdrop-blur-sm;
  }
  
  .input-tech {
    @apply bg-white/5 border border-white/20 rounded-lg px-4 py-2 text-white 
           placeholder-white/60 backdrop-blur-sm focus:bg-white/10 focus:border-blue-300 
           transition-all duration-200;
  }
}